<template>
  <div>
    <el-table :data="tableData" v-loading="loading" :row-class-name="tabRowClassName">
      <el-table-column
        prop="business">
        <template slot="header">
          <span class="header">
          业务内容
          </span>
        </template>
        <template slot-scope="scope">
          <span class="column" :class="{ darkColumn:scope.row.index%2===0}">
            {{ scope.row.business }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="platform">
        <template slot="header">
          <span class="header">
          发布平台
          </span>
        </template>
        <template slot-scope="scope">
          <span class="column" :class="{ darkColumn:scope.row.index%2===0}">
            {{ scope.row.platform }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="who_to_sent">
        <template slot="header">
          <span class="header">
          报送对象
          </span>
        </template>
        <template slot-scope="scope">
          <span class="column" :class="{ darkColumn:scope.row.index%2===0}">
            {{ scope.row.who_to_sent }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="when_to_sent">
        <template slot="header">
          <span class="header">
          报送时间
          </span>
        </template>
        <template slot-scope="scope">
          <span class="column" :class="{ darkColumn:scope.row.index%2===0}">
            {{ formatDate(scope.row.when_to_sent) }}
          </span>
        </template>
      </el-table-column>
    </el-table>
    <div v-if="tableData.length!==0" class="btnContainer">
      <el-button type="primary" @click="confer" class="bigBtn">
        确 认
      </el-button>
    </div>
  </div>
</template>

<script>
import request from '../../../network/request'

export default {
  name: 'table',
  props: {
    index: Number
  },
  data () {
    return {
      userId: JSON.parse(window.localStorage.getItem('user')).value.userId,
      tableData: [],
      loading: true
    }
  },
  inject: ['reload'],
  methods: {
    tabRowClassName ({ row, rowIndex }) {
      row.index = rowIndex
    },
    confer () {
      const qs = require('qs')
      const list = []
      for (let i = 0; i < this.tableData.length; i++) {
        list[i] = this.tableData[i].subid
      }
      request({
        url: 'notice/conferregnotice',
        method: 'post',
        params: {
          randomID: this.userId,
          list
        },
        paramsSerializer: params => {
          return qs.stringify(params, { arrayFormat: 'repeat' })
        }
      }).then(() => {
        this.reload()
      })
    },
    loadTable () {
      var _this = this
      // const loading = this.$loading({
      //   lock: true, // 同v-loading的修饰符
      //   text: 'tip.loading', // 加载文案
      //   background: 'rgba(0,0,0,0.4)', // 背景色
      //   spinner: 'el-icon-loading', // 加载图标
      //   target: document.querySelector('.el-table__body')// loading需要覆盖的DOM节点，默认为body
      // })
      request({
        url: 'notice/getnotices',
        method: 'post',
        params: {
          randomID: this.userId
        }
      }).then(res => {
        const tableContent = res.data.data
        switch (_this.index) {
          case 0:
            _this.tableData = tableContent.daily === null ? [] : tableContent.daily
            break
          case 1:
            _this.tableData = tableContent.weekly === null ? [] : tableContent.weekly
            break
          case 2:
            _this.tableData = tableContent.monthly === null ? [] : tableContent.monthly
            break
          case 3:
            _this.tableData = tableContent.routine === null ? [] : tableContent.routine
            break
          default:
            console.log('other report')
        }
        // loading.close()
        _this.loading = false
      })
    },
    formatDate (date) {
      return date.split('.')[0].replace('T', ' ')
    }
  },
  created () {
    this.loadTable()
  },
  watch: {
    index () {
      this.loadTable()
    }
  }
}
</script>

<style scoped>
  .el-table {
    width: 100%;
    height: 100%;
  }
  .header {
    color: #e5e9f2;
    line-height: 50px;
  }
  .column {
    line-height: 50px;
    border: 0;
  }
  >>> .cell {
    font-size: 1.25em;
  }
  .btnContainer {
    width: 100%;
    margin-top: 20px;
    text-align: center;
  }
  .bigBtn {
    width: 16vw;
    height: 6vh;
    font-size: 1.4em;
    border-radius: 10px;
    margin-bottom: 4vh;
  }
  .el-table .darkColumn {
    color: #e3ffff;
  }
  >>> .el-table th, >>> .el-table td {
    border: 0;
  }
  div:before{
    display: none;
  }
</style>
